<template>
  <div class="login_container">
    <!-- 背景图 -->
    <div class="login-bg">
      <div class="layer1"></div>
      <div class="layer2"></div>
      <div class="layer3"></div>
    </div>
    <!--登录中间块-->
    <div class="login-box">
      <h2>Copyright belongs to Eternity: Sign in Form</h2>
      <div class="container position_center" id="container" ref="containerRef">
        <!-- 人脸识别登录块 -->
        <div class="form-container faceVef-container">
          <div class="faceVef">
            <FaceVef :isCameraOpen="isCameraOpen" />
          </div>
        </div>
        <!-- 账号密码登录块 -->
        <div class="form-container account-container">
          <div class="title">
            <h1>Sign in</h1>
            <div class="social-container">
              <p class="social-description">Authors by</p>
              <a 
                v-for="item in avatarList" 
                :key="item.id" 
                :href="item.link"
                class="social"
              >
                <img :src="item.imgSrc" />
              </a>
            </div>
            <p style="font-size: 0.7vw;">use your account</p>
          </div>
          <div class="content">
            <Account />
          </div>
          <div class="toRegister">
            <span @click="goRetrieve">
              <!-- <p>Don't have an account? Sign up</p>
              <p>没有账号？点此去注册</p> -->
              <p>Retrieve your password?</p>
              <p>忘记密码？</p>
            </span>
          </div>
        </div>
        <!-- 表单操作区域 侧旁显示 -->
        <div class="overlay-container">
          <div class="overlay">
            <!-- 人脸识别登录 - 左侧区域 -->
            <div class="overlay-panel overlay-left">
              <h1>欢迎使用人脸登录!</h1>
              <p class="overlay-description">
                请对准面部保持不动并点击确认按钮，即可完成登录
              </p>
              <button class="ghost pointer" @click="switchForm('toAccount')">
                切换账号登录
              </button>
            </div>
            <!-- 账号密码登录 - 右侧区域 -->
            <div class="overlay-panel overlay-right">
              <h1>登录 · Login</h1>
              <p class="overlay-description">请在左侧表单输入您的账号密码进行登录</p>
              <button class="ghost pointer" @click="switchForm('toFaceVef')">
                切换人脸识别
              </button>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- 底部 -->
    <Footer />
  </div>
</template>
<script lang="ts" setup>
import FaceVef from "./components/FaceVef.vue";
import Account from './components/Account.vue';
import { ref } from "vue";
import { useRouter } from "vue-router";
const containerRef = ref<HTMLElement | any>();
const router = useRouter();

// 是否开启摄像头
const isCameraOpen = ref(false);

// 切换表单
const switchForm = (formType: string) => {
  if (formType === "toFaceVef") {
    containerRef.value.classList.add("right-panel-active");
  } else {
    containerRef.value.classList.remove("right-panel-active");
  }
  // 控制摄像头开关
  isCameraOpen.value = !isCameraOpen.value;
};

interface Avatar {
  id: number
  imgSrc: string
  description: string
  link: string
}

// 头像三剑客
const avatarList: Avatar[] = [
  {
    id: 1,
    imgSrc: '/src/assets/images/avatar/cb.jpg',
    description: '陈波',
    link: 'https://gitee.com/cbxiaochen'
  },
  {
    id: 2,
    imgSrc: '/src/assets/images/avatar/lhb.jpg',
    description: '李泓勃',
    link: 'https://gitee.com/Suponler'
  },
  {
    id: 3,
    imgSrc: '/src/assets/images/avatar/zfc2.jpg',
    description: '张逢春',
    link: 'https://gitee.com/zfc_universe'
  }
]

// 去忘记密码页面
const goRetrieve = (): void => {
  router.push('RetrievePassword')
}
</script>

<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100%;
}
// 背景图 ==> 载入图片方式 && scss星空
.login-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: url("@/assets/images/login/login-bg.png") no-repeat;
  background-size: cover;
  // filter: blur(3px);
  z-index: -999;
}

// 背景图 ==> scss星空
// .login-bg {
//   width: 100%;
//   height: 100%;
//   position: absolute;
//   left: 0px;
//   top: 0px;
//   background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
//   overflow: hidden;
//   z-index: -999;
// }
@function createShadow($n) {
  $shadow: '#{random(100)}vw #{random(100)}vh #fff';
  @for $i from 2 through $n {
    $shadow: '#{$shadow}, #{random(100)}vw #{random(100)}vh #fff';
  }
  @return unquote($shadow);
}


$count: 1000;
$duration: 400s;
@for $i from 1 through 3 {
  $count: floor(calc($count / 2));
  $duration: floor(calc($duration / 2));
  // @debug $count;
  .layer#{$i} {
    $size: #{$i}px;
    position: fixed;
    width: $size;
    height: $size;
    top: 0;
    left: 0;
    // background: #fff;
    border-radius: 50%;
    box-shadow: createShadow($count);
    animation: moveUp $duration linear infinite;
    &::after {
      content: '';
      position: fixed;
      top: 100vh;
      left: 0;
      width: inherit;
      height: inherit;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}

@keyframes moveUp {
    100% {
      transform: translateY(-100vh);
    }
}

// 登录中间块
.login-box {
  width: 100%;
  height: calc(100vh - 38px);
  border: 1px solid transparent;
  // position: relative;
  h2 {
    // font-size: 1.8vw;
    font-size: 30px;
    text-align: center;
    color: white;
    margin-top: 5%;
  }
  .container {
    border-radius: 10px;
    box-shadow:
      0 14px 28px rgba(0, 0, 0, 0.25),
      0 10px 10px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    width: 47%;
    max-width: 100%;
    // min-height: 55%;
    height: 55%;
    transition: .1s;
  }
}

// 使用媒体查询 高度小于800px时候
@media screen and (max-height: 800px) {
 .login-box {
    width: 100%;
    height: 100%;
  //  .container {
  //     width: 55%;
  //     height: 70%;
  //   }
  }
  .account-container {
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    .title {
      // display: none;
    }
  }
}
  
// @media screen and (min-height: 654px) and (max-height: 854px) {
//  .login-box {
//     width: 100%;
//     height: 100%;
//     .container {
//       width: 55%;
//       height: 60%;
//     }
//   }
// }


h1 {
  font-weight: bold;
  margin: 0;
}

p.overlay-description {
  font-size: 0.9vw;
  font-weight: 100;
  line-height: 20px;
  letter-spacing: 0.5px;
  margin: 20px 0 30px;
}

span {
  font-size: 12px;
} 

a {
  color: #333;
  font-size: 14px;
  text-decoration: none;
  margin: 15px 0;
}

button:active {
  transform: scale(0.95);
}

button:focus {
  outline: none;
}

button.ghost {
  border-radius: 20px;
  border: 1px solid #ff4b2b;
  background-color: #ff4b2b;
  color: #ffffff;
  font-size: 0.7vw;
  font-weight: bold;
  padding: 0.7vw 2vw;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 80ms ease-in;
  background-color: transparent;
  border-color: #ffffff;
  &:hover {
    background-image: linear-gradient(to right, #e99384, rgb(124, 220, 107));
  }
}

.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.6s ease-in-out;
}

.account-container {
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 2;
  background-color: #fff;
  overflow-y: scroll;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
  .title {
    margin: 10% 0 5% 0;
    font-size: 1vw;
    text-align: center;
    .social-container {
      transition: 0.3s;
      margin: 1% 0;
      p.social-description {
        font-size: 0.8vw;
        font-weight: 100;
        letter-spacing: 0.5px;
        margin: 10px 0;
      }
      a {
        border: 1px solid #dddddd;
        border-radius: 50%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
        height: 2.5vw;
        width: 2.5vw;
        overflow: hidden;
        &:hover {
          box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
           rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
            rgba(0, 0, 0, 0.2) 0px -3px 0px 
          inset;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .toRegister {
    // border: 1px solid red;
    text-align: center;
    color: #000;
    span {
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: rgb(124, 220, 107);
      }
    }
  }
}

.container.right-panel-active .account-container {
  transform: translateX(100%);
}

.faceVef-container {
  left: 0;
  width: 50%;
  opacity: 0;
  z-index: 1;
  background-color: #fff;
  overflow-y: scroll;
  .faceVef{
    // border: 1px solid red;
    width: 100%;
    margin-top: 20%;
  }
  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
}

.container.right-panel-active .faceVef-container {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
  animation: show 0.6s;
}

@keyframes show {
  0%,
  49.99% {
    opacity: 0;
    z-index: 1;
  }

  50%,
  100% {
    opacity: 1;
    z-index: 5;
  }
}

.overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  transition: transform 0.6s ease-in-out;
  z-index: 100;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
}

.container.right-panel-active .overlay-container {
  transform: translateX(-100%);
}

.overlay {
  background: #ff416c;
  background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c);
  background: linear-gradient(to right, #ff4b2b, #ff416c);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  color: #ffffff;
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
  transform: translateX(50%);
}

.overlay-panel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  top: 0;
  height: 100%;
  width: 50%;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  h1 {
    font-size: 2vw;
  }
}

.overlay-left {
  transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
  transform: translateX(0);
}

.overlay-right {
  right: 0;
  transform: translateX(0);
}

.container.right-panel-active .overlay-right {
  transform: translateX(20%);
}

</style>
